<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>bootstarp演示</title>
  <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.1/css/bootstrap.min.css">

  <link rel="stylesheet" href="../css/bs.css">
</head>

<body>
  <div>
    <span class="btn btn-danger">按钮</span>
    <button class="btn btn-primary">按钮二</button>
    <span class="btn btn-success disabled">按钮三</span>
    <button class="btn btn-link">超链接</button>
  </div>
  <div class="text-bg-danger p-2 m-1">配色</div>

  <div class="img-box img-thumbnail m-3">
    <img class="img-fluid" src="../images/102304834_p0_master1200.jpg" alt="">
  </div>

  <div class="d-flex justify-content-center">


    <div class="m-2">
      <input type="text" class="form-control form-control-sm">
    </div>

    <div class="m-2">
      <select class="form-select form-control-sm">
        <option>蒙德</option>
        <option>璃月</option>
        <option>稻妻</option>
        <option>须弥</option>
        <option>枫丹</option>
        <option>纳塔</option>
        <option>至冬</option>
        <option>天空岛</option>
        <option>坎瑞亚</option>
        <option>暗之外海</option>
        <option>金苹果群岛</option>
        <option>寂烬海</option>
      </select>
    </div>

    <div class="m-2">

      <label class="m-1">
        <input class="form-check-input" type="radio" name="rdo">单选1
      </label>

      <label class="m-1">
        <input class="form-check-input" type="radio" name="rdo">单选2
      </label>

    </div>


  </div>


  <div style="width: 20rem;" class="m-3">

    <div class="card">
      <div class="card-header">你说得对</div>
      <div class="card-body">
        你说的对，但是《原神》是由米哈游自主研发的一款全新开放世界冒险游戏。 游戏发生在一个被称作「提瓦特」的幻想世界，在这里，被神选中的人将被授予「神之眼」，导引元素之力。 你将扮演一位名为「旅行者」的神秘角色，在自由的旅行中邂逅性格各异、能力独特的同伴们，和他们一起击败强敌，找回失散的亲人——同时，逐步发掘「原神」的真相。..........................................
      </div>
    </div>

  </div>

  <div>
    <button class="btn btn-primary" 
    data-bs-toggle="modal" 
    data-bs-target="#dialog">弹出对话框</button>
    <!-- 弹出对话框 -->
    <div class="modal fade" id="dialog">
      <div class="modal-dialog">
          <div class="modal-content">

            <div class="modal-header">
              <span>标题</span>
              </div>

          <div class="modal-body">
            <div class="m-3">
              <input type="text" class="form-control" placeholder="用户名">
            </div>
            <div class="m-3">
              <input type="password" class="form-control" placeholder="密码">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>



  <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.1/js/bootstrap.min.js"></script>

</body>

</html>